<template>
	<view
		class="address-item ss-flex flex-column ss-col-center"
		:class="[{ card: !isEmpty(props.item) }]"
	>
		<view class="item-address" v-if="!isEmpty(props.item)">
			<view class="border-bottom">
				<view class="body ss-p-10">
					<view class="header">
						<view class="person-text"
							>{{ props.item.consignee }} {{ props.item.mobile }}</view
						>
					</view>
				
					<view class="address-text"
						>{{ item.provinceName }} {{ item.cityName }} {{ item.countyName }}
						{{ props.item.address }}
					</view>
				</view>
			</view>
			

			<view class="foot ss-flex ss-row-between" v-if="hasBorderBottom">
				<view class="" v-if="item.defaultUsed == 1">
					<uni-icons type="checkbox" size="14"></uni-icons>
					<text class="font-0">已设为默认</text>
				</view>
				<view class="" v-else @tap.stop="defaultUsed">
					<uni-icons type="circle" size="14"></uni-icons>
					<text class="font-0">默认收货地址</text>
				</view>

				<view class="execution ss-flex">
					<view class="" @tap.stop="onDelete"> 删除 </view>
					<view class="" @tap.stop="onCopy"> 复制 </view>
					<view class="" @tap.stop="onEdit"> 修改 </view>
				</view>
			</view>
		</view>
		<view v-else><view class="address-text ss-m-b-10">请选择收货地址</view></view>
	</view>
</template>

<script setup>
	/**
	 * 基础组件 - 地址卡片
	 *
	 * @param {String}  icon = _icon-edit    - icon
	 *
	 * @event {Function()} click			 - 点击
	 * @event {Function()} actionClick		 - 点击工具栏
	 *
	 * @slot 								 - 默认插槽
	 */
	import { isEmpty } from 'lodash';
	import $url from '/shop/url/index.js';
	import $router from '/shop/router/index.js';
	import $user from '/shop/api/user.js';
	const emits = defineEmits(['reload']);
	const props = defineProps({
		item: {
			type: Object,
			default() {},
		},
		hasBorderBottom: {
			type: Boolean,
			defult: false,
		},
	});

	const onEdit = () => {
		$router.go('/pages/user/address/edit', {
			id: props.item.id,
		});
	};

	const onCopy = async () => {
		await $user.address.copy({
			id: props.item.id,
		});
		emits('reload');
	};

	const defaultUsed = async () => {
		console.log('default used');
		await $user.address.defaultUsed(props.item.id);

		emits('reload');
	};

	const onDelete = () => {
		uni.showModal({
			title: '确认删除地址吗?',
			async success(res) {
				if (res.confirm) {
					await $user.address.delete(props.item.id);
					emits('reload');
				}
			},
		});
	};
</script>

<style lang="scss" scoped>
	.address-item {
		padding: 20rpx 30rpx;

		.address-text {
			font-size: 25rpx;
			font-weight: 500;
			color: #333333;
			line-height: 48rpx;
		}

		.person-text {
			font-size: 35rpx;
			font-weight: bold;
			color: $dark-4;
		}
	}

	.edit-btn {
		width: 44rpx;
		height: 44rpx;
		background: $gray-f;
		border-radius: 50%;

		.edit-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
	image {
		width: 100%;
		height: 100%;
	}

	.card {
		// height: 260rpx;
		background-color: $white;
		margin: 5px 0px;
		border-radius: 20px;
		box-sizing: content-box;

		.item-address {
			width: 100%;
		}
		.body {
			 
			width: 100%;
			margin-bottom: 5px;
			// border-bottom: 1px solid $gray-e;
			.header {
				margin: 5px;
			}
		}
		.foot {
			padding: 15rpx;
			width: 100%;
		}
		.execution {
			view {
				width: 40px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border: 1px solid $gray-e;
				margin-right: 5px;
				border-radius: 10px;
				color: $dark-6;
			}
		}
	}
</style>
